<template>
  <div>
    <div class="package" :style="'min-height:' + heightWrap + 'px'">
      <head-top routerName="task" title="加速包"></head-top>
      <div class="content-wrap">
        <van-swipe :autoplay="autoplay" @change="onChange">
          <van-swipe-item
            v-for="(item, index) in resultData"
            :class="'color' + (index + 1)"
            :key="index"
          >
            <div :class="'back bg' + (index + 1)"></div>
            <div class="swipeTop">
              {{ item.packageName | formatFront }}
              <span>{{ item.packageName | formatAfter }}</span>
            </div>
            <div class="swipeName">
              总产<span>{{ item.cumulative }}</span
              >元宝
            </div>
          </van-swipe-item>
        </van-swipe>
        <template v-for="(item, index) in resultData">
          <div
            class="package-content"
            :class="'color' + (index + 1)"
            v-if="index === indexof"
            :key="index"
          >
            <div class="title">
              {{ item.packageName | formatFront }}
            </div>
            <ul>
              <li>
                <div class="data">
                  <span>{{ item.daily }}</span
                  >元宝
                </div>
                <div class="label">每日产出</div>
              </li>
              <li>
                <div class="data">
                  <span>{{ item.readingCycle }}</span
                  >天
                </div>
                <div class="label">释放周期</div>
              </li>
              <li v-if="index === 0">
                <div class="data"><span>90</span>天</div>
                <div class="label">有效期</div>
              </li>
              <li v-else>
                <div class="data">
                  <span>{{ item.limits }}</span
                  >个
                </div>
                <div class="label">上限</div>
              </li>
              <li v-if="index !== 0">
                <div class="data">
                  <span>{{ item.cumulative }}</span
                  >个
                </div>
                <div class="label">元宝</div>
              </li>
            </ul>
            <div
              class="button"
              v-if="index !== 0"
              @click="PasswordInputShou(item.id, item.dailyOutput)"
            >
              立即兑换
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="footer">
      <van-checkbox v-model="checked"
        >请阅读链客<span @click="protocol">《电子协议》</span></van-checkbox
      >
    </div>
    <password-input
      ref="password"
      :describe="'需支付' + dailyOutput + '元宝'"
      @BuyData="clickBuyData"
      @autoplay="autoplay = 5000"
    ></password-input>
    <electronic-protocol ref="protocol"></electronic-protocol>
  </div>
</template>
<script>
import { Swipe, SwipeItem, Checkbox, Toast } from "vant";
import { packageData, buyData } from "@/api/task";
import HeadTop from "@/components/head";
import md5 from "js-md5";
export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Checkbox.name]: Checkbox,
    [Toast.name]: Toast,
    PasswordInput: (resolve) => require(["@/components/Password"], resolve),
    ElectronicProtocol: (resolve) => require(["./agreement"], resolve),
    HeadTop,
  },
  data() {
    return {
      indexof: 0,
      resultData: "",
      packageId: "",
      autoplay: 50000000,
      checked: false,
      heightWrap: "",
      dailyOutput: "",
    };
  },
  filters: {
    formatFront(text) {
      const index = text.indexOf(" ");
      if (index !== -1) {
        return text.substring(0, index);
      } else {
        return text;
      }
    },
    formatAfter(text) {
      const index = text.indexOf(" ");
      if (index !== -1) {
        return text.substr(text.lastIndexOf(" "));
      }
    },
  },
  created() {
    this.heightWrap = document.documentElement.clientHeight;
    console.log(this.heightWrap);
    packageData().then((res) => {
      this.resultData = res.data.resultData;
    });
  },
  methods: {
    onChange(index) {
      this.indexof = index;
    },
    PasswordInputShou(id, dailyOutput) {
      if (this.checked) {
        this.$refs.password.show();
        this.packageId = id;
        this.dailyOutput = dailyOutput;
        this.autoplay = false;
      } else {
        Toast( "请阅读链客电子协议");
      }
    },
    protocol() {
      this.$refs.protocol.actionShow = true;
    },
    clickBuyData(Password) {
      const data = {
        packageId: this.packageId,
        payPassword: md5(Password),
      };
      buyData(data).then((res) => {
        if (res.data.resultStatus) {
          this.$refs.password.hide();
          Toast.success(res.data.errorMessage);
        } else {
          this.$refs.password.fail(res.data.errorMessage);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.package {
  overflow: hidden;
}
.footer {
  position: relative;
  margin-top: -78px;
  z-index: 1;
  text-align: center;
  .van-checkbox {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    justify-content: center;
    justify-items: center;
    /deep/ .van-checkbox__icon {
      height: 13px;
      .van-icon {
        width: 13px;
        height: 13px;
        line-height: 13px;
        font-size: 10px;
      }
    }
    /deep/ .van-checkbox__label {
      margin: 2px 0 0 4px;
      font-size: 10px;
      height: 13px;
      line-height: 12px;
      span {
        color: #17407a;
      }
    }
  }
}
.content-wrap {
  .van-swipe {
    padding-top: 17px;
    width: 100%;
    height: 202px;
    .van-swipe-item {
      border-radius: 14px;
      color: #ffffff;
      overflow: hidden;
      .back {
        width: 100%;
        height: 202px;
        background-position: center;
        background-size: 100% 202px;
        &:after {
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          left: 0;
          content: "";
          background: url(./banner.png) no-repeat;
          background-size: auto 202px;
          background-position: left;
        }
        &.bg1 {
          background: #7268DB;
        }
        &.bg2 {
          background: #3B74BD;
        }
        &.bg3 {
          background: #3B99BD;
        }
        &.bg4 {
          background: #BD7D3B;
        }
        &.bg5 {
          background: #5DC3DC;
        }
        &.bg6 {
          background: #3B55BD;
        }
      }
      .swipeTop {
        position: absolute;
        left: 10px;
        top: 10px;
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
        span {
          display: inline-block;
          padding-left: 9px;
          height: 22px;
          font-size: 16px;
          font-weight: 400;
          line-height: 22px;
        }
      }
      .swipeName {
        position: absolute;
        top: 85px;
        width: 100%;
        text-align: center;
        height: 38px;
        font-size: 27px;
        font-weight: 500;
        line-height: 38px;
        span {
          display: inline-block;
          font-size: 38px;
        }
      }
    }
    /deep/.van-swipe__indicator {
      width: 6px;
      height: 6px;
      &.van-swipe__indicator--active {
        background: #ffffff;
      }
    }
  }
  .package-content {
    padding-bottom: 90px;
    margin-top: 29px;
    text-align: center;
    color: #333333;
    .title {
      position: relative;
      display: flex;
      align-items: center;
      height: 22px;
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      padding: 0 15px;
      &:after,
      &:before {
        margin: 0 13px;
        content: "";
        display: block;
        flex: 1;
        box-sizing: border-box;
        height: 1px;
        border-color: inherit;
        border-style: inherit;
        border-width: 1px 0 0;
        transform: scaleY(0.5);
        border-style: solid;
      }
    }
    ul {
      margin-top: 35px;
      list-style: none;
      display: flex;
      li {
        flex: 1;
        &:first-child {
          flex: 30% 0 0;
          width: 30%;
        }
        .data {
          height: 22px;
          font-size: 12px;
          font-weight: 400;
          line-height: 22px;
          span {
            font-size: 16px;
          }
        }
        .label {
          margin-top: 5px;
          height: 17px;
          font-size: 12px;
          font-weight: 400;
          line-height: 17px;
        }
      }
    }
    .button {
      width: 308px;
      height: 46px;
      background: #333333;
      color: #ffffff;
      border-radius: 2px;
      text-align: center;
      border-width: 1px;
      border-style: solid;
      margin: 59px auto 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: 500;
    }
  }
}
.van-overlay {
  background: none;

  .block {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    margin: -53px auto 0 auto;
    width: 163px;
    height: 106px;
    border-radius: 10px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    font-size: 14px;
    line-height: 106px;
    color: #fff;
  }
}
</style>